import {useState, useEffect, useRef} from 'react';
import {connect} from "react-redux";
import Taro, {useDidShow} from "@tarojs/taro";
import {View, Text} from '@tarojs/components'
import {AtButton, AtInput, AtModal, AtModalContent, AtModalHeader, AtModalAction, AtIcon} from "taro-ui";
import {InputNumber, ConfigProvider} from '@nutui/nutui-react-taro'
import request from '../../../service/api';
import './index.less';


function IntegralRecharge(props) {
  const inputRef = useRef(null);
  const {dispatch, integral, chargeOptions = []} = props;
  const [value, setValue] = useState(chargeOptions.length ? chargeOptions[0].value : undefined);
  const [unitPrice, setUnitPrice] = useState(chargeOptions.length ? chargeOptions[0].value : undefined);
  const [number, setNumber] = useState(1);
  const [modalVisible, setVisible] = useState(true);
  useDidShow(() => {
    dispatch({
      type: 'wallet/getPoint2Money'
    })
  })
  useEffect(() => {
    setValue(chargeOptions.length ? chargeOptions[0].value : undefined)
    setUnitPrice(chargeOptions.length ? chargeOptions[0].value : undefined)
  }, [chargeOptions.length]);
  console.log('value', value);
  console.log('unitPrice', unitPrice);
  console.log('chargeOptions', chargeOptions);
  const customTheme = {
    nutuiInputnumberButtonWidth: '24px',
    nutuiInputnumberButtonHeight: '24px',
    nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
    // nutuiInputnumberInputBackgroundColor: '#fff',
    nutuiInputnumberInputMargin: '0 2px',
  }
  return (
    <View className='rechargeWrap'>
      <View className='balanceLine'>
        <View className='balanceLabel'>当前积分</View>
        <View className='balanceValue'>
          <AtIcon prefixClass='icon' value='jifen' size='16' color='#FA6400'/>&nbsp;
          {integral.toFixed(0)}
        </View>
      </View>
      <View className='chargeOption'>
        <View>购买积分</View>
        <View className='chargeLine'>
          <ConfigProvider theme={customTheme} style={{display: 'flex'}}>
            <InputNumber
              value={number}
              min={1}
              step={1}
              onChange={(v) => {
                console.log('onChange', v);
                setValue(v * unitPrice);
                setNumber(v)
              }}
            />
          </ConfigProvider>
          <AtInput
            disabled
            ref={inputRef}
            name='value'
            title='¥'
            type='digit'
            // type='number'
            placeholder='请输入其他金额'
            value={(parseFloat(value)).toFixed(2)}
            maxLength={8}
          />
        </View>
        <View className='chargeBtnsNew'>
          {chargeOptions.map((i) =>
            <View
              className={parseFloat(unitPrice) === i.value ? 'activeBtn' : 'btn'}
              onClick={() => {
                setTimeout(() => setValue(i.value * number), 100);
                setUnitPrice(i.value);
              }}
            >
              <View className="integral">{i.text}</View>
              <View className="money">{i.money}</View>
            </View>)}
        </View>
      </View>
      <View className='integralNote'>
        *注: 1积分相当于1元使用,且购买后无法退款.
      </View>
      <View className='pageFooter'>
        <AtButton
          disabled={!value || parseFloat(value) <= 0}
          onClick={() => {
            console.log('充值formvalue', value);
            if (value && value >= 0.01) {
              const openid = Taro.getStorageSync('openid');
              request.post('/mini/order-pay/createPayOrder', {
                openid,
                amount: (parseFloat(value)).toFixed(2),
                payFlag: 1
              }).then((res) => {
                const {statusCode, data = {}} = res;
                if (statusCode === 200 && data.code === 200) {
                  const {data: D = {}} = data;
                  const orderInfo = {
                    "timeStamp": D?.timeStamp,
                    "nonceStr": D?.nonceStr,
                    "package": D?.packageVal,
                    "signType": D?.signType,
                    "paySign": D?.paySign
                  }
                  console.log('orderInfo', orderInfo);
                  Taro.requestPayment({
                      ...orderInfo,
                      success: function (resSuccess) {
                        console.log('支付成功', resSuccess);
                        dispatch({
                          type: 'wallet/getBalance'
                        });
                        Taro.reLaunch({url: '/pages/mine/index'})
                      },
                      fail: function (resFail) {
                        console.log('支付失败', resFail)
                      },
                      complete: function (resComplete) {
                        console.log('动作完成(成功与否未知)', resComplete)
                      }
                    }
                  )
                } else {
                  Taro.showToast({
                    title: '订单创建失败',
                    icon: 'error'
                  })
                }
              })
            } else {
              Taro.showToast({
                title: '充值金额至少为0.01积分',
                icon: 'none'
              })
            }
          }}
        >立即购买</AtButton>
      </View>
      <AtModal isOpened={modalVisible} closeOnClickOverlay={false}>
        <AtModalHeader><View style={{fontWeight: 'bold'}}>免责声明</View></AtModalHeader>
        <AtModalContent>
          <View className='textContent'>
            <View className='textP'>
              在您便用金冠智充充电去平台(包括但不限于便用充电服务、账户注册、充值、查询等)之前，
              请仔细阅读本声明的所有条款。本着平等自愿的原则.如果您对本声明有异议，
              可停止使用，您一且使用本平台进行上述提作，即表明您无条件地接受本声明，您应遵守本声明和相关法律的规定。
            </View>
            <View className='subTitle'>一、责权区分</View>
            <View className='textP'>
              金冠爱充充电云平台归<Text style={{fontWeight: 'bold'}}>河南金冠技术有限公司</Text>所有，本平台所依附的充电实物设施(充电终端控制器、充电终端及步路和配套设施)
              由独立的运营方所有，
              您已明知充电服务的提供方及服务合同的相对方为充电设施的具体运营方。
            </View>
            <View className='subTitle'>二、声明条款</View>
            <View className='textP'>
              2.1、在使用本充电设备前，请您务必事先了解设备的使用方法、流程及相关的风险，合规使用本设备。
            </View>
            <View className='textP'>
              2.2、您通过金冠爱充充电云平台进行的账号充值，相关款项将直接进入设备运营方的账户，金冠爱充充电云平台仅提供费用结算
              功能，不负有您账户余额的保管、退款义务，如需办理注销账户以及账户余额退款等业务，需要您直接联系充电设施的具体运营方办理;
              如对本条款有异议，请勿进行账户充值!
            </View>
            <View className='textP'>
              2.3、金冠爱充充电云平台所运行的设备仅提供新能源车及同类设备的充电服务，请勿利用本设备对除新能源车及同类设备之外的设备进行充电提作;
              因您违反本规定造成的所有损失，由您自行承担
            </View>
            <View className='textP'>
              2.4、您使用本平台享受充电服务的过程中，平台提供方对您的爱车以及所附属的个人财物不负有保管义务，请您自行妥善保管相关财物，上述财物在充电服务过程中发生丢失的，请及时通过司法途径解决。
            </View>
            <View className='textP'>
              2.5、请您使用车辆的原装充电器进行充电提作，且因充电器为易损物品，建议您定期对其进行保养、检修:因您使用不合规充电器造成财物损失等一切不利后果需由您自行承担。
            </View>
            <View className='textP'>
              2.6、您在接受服务过程中，如对使用方法、费用结算、设备异常及服务质量等存在问题，请您联系充电设施的具体运营方，我平台将为您维护自身合法权益提供必要支持。
            </View>
            <View className='textP'>
              2.7、您在使用此充电设备的过程中，如因您个人违规造作等原因造成自身及他人人身、财物受有损失的，相关责任由您自行承担。
            </View>
            <View style={{color: "#FA6400"}}>
              *注: 使用积分抵扣电费时,扣费规则向上取整。(如：充电费用1.4元,使用积分抵扣时,扣除2积分)
            </View>
            <View className='subTitle'>三、法律管辖和使用</View>
            <View className='textP'>
              本声明的订立、执行、解释及争议的解决均应适用中华人民共和国现行有效法律。如发生本声明和适用之法律相抵触时，则相关条款依此时现行法律重新解释，其他条款继续有效如缔约方就本声明内客或其执行发生任何争议，双方应尽力友好协商解决;协商不成形成诉讼的，任何一方均应向平台所有方所在地法院提起诉讼。
            </View>
            <View className='subTitle'>四、声明内容的更新</View>
            <View className='textP'>
              您认同平台所有方(<Text style={{fontWeight: 'bold'}}>河南金冠技术有限公司</Text>)
              拥有根据需要随时对本声明内容进行更新的权利，请您使用本设备时及时查看设备中当前声明内容。
            </View>
          </View>
        </AtModalContent>
        <AtModalAction>
          <View className='textFooter' onClick={() => setVisible(false)}>已阅读并同意该协议</View>
        </AtModalAction>
      </AtModal>
    </View>
  )
}

export default connect(({wallet}) => {
  return {...wallet}
})(IntegralRecharge)
